<template>

    <div class="booksView">
   
        <mt-header fixed title="" class="header">
            <mt-button @click="goback" icon="back" slot="left" >
                <div style="margin-top:5px;">back</div>
            </mt-button>
        </mt-header>

        <div class="line"></div>

                 <img :src="booksPic" class="booksPic">

        <div class="bookTitle">
            <H2 style="font-weight:bold; font-size:150%;"> 
                {{booksTitle}}
            </H2>
        </div>

        <div class="bookAuthor">
            <H3 style="font-weight: bold; font-size:120%;">
            {{booksAuthor}}
            </H3>
        </div>

         <mt-button size="small" class="btn1" @click="add()">加入书架</mt-button>
         <mt-button size="small" class="btn2" @click="add_1()">申请借阅</mt-button>
                   
        <div class="line1"></div> 

        <div class="sort">
            <H1 style="font-weight: normal; font-size:230%;">
                分类
            </H1>
            <div class="bookSort">
                <H1 style="font-weight:bold; font-size:230%;">
                {{booksSort}}
                </H1>
            </div>
        </div>
        
        <div class="line2"></div>

        <div class="number">
            <H1 style="font-weight: normal; font-size:230%;">
                编号
            </H1>
            <div class="bookSort">
                <H1 style="font-weight:bold; font-size:230%;">
                {{booksNumber}}
                </H1>
            </div>
        </div>

        <div class="line2"></div>

        <div class="location">
            <H1 style="font-weight: normal; font-size:230%;">
                位置
            </H1>
            <div class="bookLocation">
                <H1 style="font-weight:bold; font-size:230%;">
                {{booksLocation}}
                </H1>
            </div>
        </div>

        <div class="line2"></div>

        <div class="inventory">
            <H1 style="font-weight: normal; font-size:230%;">
                剩余
            </H1>
            <div class="bookInventory">
                <H1 style="font-weight:bold; font-size:230%; color:red">
                {{booksInventory}}
                </H1>
                <H1 style="font-weight:bold; font-size:230%; margin-top:-11%; margin-left:28%;">
                本
                </H1>
            </div>
        </div>
         
        <div class="line2"></div>

        
    
  
    </div>
 


</template>
<script>
     export default {
         name:"booksView",
         data(){
             return{

             }
         },


         computed:{
             booksPic(){
                 return this.$store.state.books[this.$store.state.books_id].img;
             },
             booksTitle(){
                 return this.$store.state.books[this.$store.state.books_id].title;
             },
             booksAuthor(){
                 return this.$store.state.books[this.$store.state.books_id].author;
             },
              booksSort(){
                 return this.$store.state.books[this.$store.state.books_id].sort;
              },
              booksNumber(){
                 return this.$store.state.books[this.$store.state.books_id].number;
              },
              booksLocation(){
                 return this.$store.state.books[this.$store.state.books_id].location;
              },
              booksInventory(){

                 return this.$store.state.books[this.$store.state.books_id].inventory;
              }
             
         },
         methods:{
             add()
             {

//                 if(this.$store.state.userNameBooks.length==0){
                     this.$store.state.userNameBooks.push(this.$store.state.books[this.$store.state.books_id]);
//                 }else {
//                     for (var i=0;i<this.$store.state.userNameBooks.length;i++){
//                         if(this.$store.state.userNameBooks==this.$store.state.books[this.$store.state.books_id]){
//                             break;
//                         }else {
//                             this.$store.state.userNameBooks.push(this.$store.state.books[this.$store.state.books_id]);
//                         }
//                     }
//                 }

             },
                add_1(){
                    this.$store.state.userNameBooks1.push(this.$store.state.books[this.$store.state.books_id]);
                },
             beforeCreate(){
                  document.body.scrollTop = 0
                  document.documentElement.scrollTop = 0
             },
            goback(){
                this.$store.commit("changeStyle",1);
                this.$router.go(-1);
            },
         }
     }
</script>
<style >

    .booksPic
    {
        border: 0.5px solid #080808;
        box-shadow:3px 2px 6px #000;
        margin-left:-45%;
        margin-top:8%;
        height:180px;
        width:35%;
        background-color:bisque;
    }

    .bookTitle
    { 
        width: 50%;
        margin-left: 45%;
        margin-top:-40%;
        padding-top:5px;
        margin-bottom: 20%;
        color: black;
        
    }

    .bookAuthor
    {
        margin-top:-15%;
        margin-left: 40%;
       
    }
  

    .line1 {
        border-top: 4px solid #CCCC99;
        height: 4px;
        margin-top:11%;
        margin-left:-5%;
    }

    .line2 {
        border-top: 1px solid #CCCC99;
        height: 4px;
        margin-top:1%;
        margin-left:-5%;
    }

    .sort {
        margin-left: -62%;
        margin-top:8%;
    }

    .number {
        margin-left: -62%;
        margin-top:8%;
    }

    .bookSort {
        margin-top:-8%;
        margin-left:50%;
    }

    .location {
        margin-left: -62%;
        margin-top:8%;
    }

    .bookLocation {
        margin-top:-8%;
        margin-left:63%;
    }

    .inventory {
        margin-left: -62%;
        margin-top:8%;       
    }

    .bookInventory {
        margin-top:-8%;
        margin-left:35%;
    }

    .btn1 {
        margin-top:6%;
        margin-left:45%;
        margin-right:4%;
    }

    
</style>